<template>
	<div class="brand">
    <div class="brand-primary">
      <div class="describe">
        <h2>
          <span>成为好好住</span>
          <span style="color: red">品牌认证</span>
        </h2>
        <p>海量内容实现流量高效转化</p>
        <p>特有的口碑传播</p>
        <p>为品牌曝光和店铺引流提供良好资源</p>
        <el-button type="danger" size="large">立即申请</el-button>
      </div>
		  <el-image class="primary-image" :src="Image" fit="contain"></el-image>
    </div>
		<el-card class="border" shadow="never">
			<h1 slot="header">认证优势</h1>
      <div class="content">
        <el-image :src="ImageGood" fit="contain"></el-image>
      </div>
		</el-card>
		<el-card class="border advant" shadow="never">
			<h1 slot="header">认证步骤</h1>
      <div class="content">
        <el-image :src="ImageStep" fit="contain"></el-image>
      </div>
		</el-card>
	</div>
</template>
<script lang="ts" setup>
import Image from '@/assets/brand.png'
import ImageGood from '@/assets/brand-1.png'
import ImageStep from '@/assets/brand-2.png'

</script>
<style scoped>
.brand {
  background-color: rgb(255, 244, 234);
}
.brand-primary{
  height: 470px;
  display: flex;
  justify-content: center;
}
.brand-primary::before{
  width: 300px;
  display: block;
  content: " ";
}
.describe{
  width: 500px;
  margin-top: 100px;
}

.primary-image{
  height: 440px;
}

h2{
  font-size: 28px;
  letter-spacing: 3.3px;
}

h1{
  margin-block-start: 100px;
  text-align: center;
  font-size: 32px;
}
.border{
  border: 0;
}
.advant{
  background-color: var(--ltd-color-white);
}
.content{
  padding: 60px 150px;
}
</style>